import React from 'react';
import styled from '@emotion/styled';

interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  error?: boolean;
  fullWidth?: boolean;
  mode?: 'date' | 'datetime' | 'time' | 'month' | 'week';
}

export type { DatePickerProps };

const StyledDateInput = styled.input<{ error?: boolean; fullWidth?: boolean }>`
  width: ${(props) => (props.fullWidth ? '100%' : 'auto')};
  padding: 0.625rem 0.75rem;
  border: 1px solid ${(props) => (props.error ? 'var(--error-color, #ef4444)' : 'var(--border-color, #e5e7eb)')};
  border-radius: 8px;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-primary, #111827);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.2s ease;
  outline: none;
  cursor: pointer;

  &:hover {
    border-color: ${(props) => (props.error ? 'var(--error-color, #ef4444)' : 'var(--accent-color, #3b82f6)')};
  }

  &:focus {
    border-color: ${(props) => (props.error ? 'var(--error-color, #ef4444)' : 'var(--accent-color, #3b82f6)')};
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 0 0 3px
      ${(props) =>
        props.error
          ? 'rgba(239, 68, 68, 0.1)'
          : 'var(--accent-color-shadow, rgba(59, 130, 246, 0.1))'};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-tertiary, #f3f4f6);
  }

  /* 自定义日历图标颜色 */
  &::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: var(--date-picker-icon-filter, none);
    opacity: 0.6;
    transition: opacity 0.2s;
  }

  &:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
  }
`;

export const DatePicker: React.FC<DatePickerProps> = ({
  value,
  onChange,
  error = false,
  fullWidth = false,
  mode = 'date',
  ...props
}) => {
  const getInputType = () => {
    switch (mode) {
      case 'datetime':
        return 'datetime-local';
      case 'time':
        return 'time';
      case 'month':
        return 'month';
      case 'week':
        return 'week';
      default:
        return 'date';
    }
  };

  return (
    <StyledDateInput
      type={getInputType()}
      value={value}
      onChange={onChange}
      error={error}
      fullWidth={fullWidth}
      {...props}
    />
  );
};

export default DatePicker;

